<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取表单元素</title>
</head>
<body>
    <form name="myForm" action="https://www.baidu.com">
        <div>
            <label for="username">用户名：</label>
            <input id="username"  name="username" type="text" value="aaaaaa">
        </div>
        <div>
            <label for="pwd">密码：</label>
            <input id="pwd" type="password">
        </div>
        <div>
            <label>性别：</label>
            <input type="radio" checked name="gender" value="男"><label>男</label>
            <input type="radio" name="gender" value="女"><label>女</label>
        </div>
        <div>
            <label>所学习的技术：</label>
            <input id="allBtn" type="button" value="全选/取消">
            <input type="checkbox" name="lang"><label>HTML</label>
            <input type="checkbox" name="lang"><label>CSS</label>
            <input type="checkbox" name="lang"><label>JS</label>
            <input type="checkbox" name="lang"><label>React</label>
            <input type="checkbox" name="lang"><label>VUE</label>
        </div>
        <div>
            <input type="submit">
            <input type="reset">
            <span id="submitSpan">提交</span>
            <span id="resetSpan">重置</span>
        </div>
    </form>
    <script>
        // 获取form元素
        // let fm = document.forms[0];
        // let fm = document.forms["myForm"];
        let fm = document.myForm;
        // console.log(fm);
        // 获取表单域
        // console.log(fm.elements[0]);
        // console.log(fm.elements["username"]);
        // console.log(fm.username);
        // console.log(fm["username"]);
        console.log(fm[1]);
        let username = document.getElementById("username");
        let genders = document.getElementsByName("gender");
        fm.onsubmit = function(e){
            console.log('submit');
            console.log("用户名：",username.value);
            let gender = "";
            for(let i = 0;i < genders.length;i++){
                if(genders[i].checked){
                    gender = genders[i].value;
                }
            }
            console.log("性别为："+gender);
            e.preventDefault();
        }
        fm.onreset = function(e){
            console.log("重置");
            // e.preventDefault();
        }

        let submitSpan = document.getElementById("submitSpan");
        let resetSpan = document.getElementById("resetSpan");
        submitSpan.onclick = function(){
            fm.submit();
        }
        resetSpan.onclick = function(){
            fm.reset();
        }
        username.onfocus = function(){
            console.log("获取焦点");
        }
        username.onblur= function(){
            console.log("失去焦点");
        }
        username.onchange = function(){
            console.log("change事件");
        }
        username.oninput = function(){
            console.log("input事件:",this.value);
        }

        // 特殊属性是指只需要写属性名，不需要写属性值的属性
        // 在JS中通过boolean变量来设置特殊属性是否起作用
        // readonly和disabled的区别：
        // readonly是只读属性，只能用在文本框或密码框的元素中
        // readonly设置的文本框，其中的数据是可以提交给服务器的
        // disabled是指表单元素被禁用，可以用在所有的表单域中
        // 被禁用的表单域不能和后台进行交互

        let allBtn = document.getElementById("allBtn");
        let flag = false;
        allBtn.onclick = function(){
            let languages = document.getElementsByName("lang");
            for(let i = 0;i < languages.length;i++){
                if(!flag){
                    languages[i].checked = true;
                }else{
                    languages[i].checked = false;
                }
            }
            flag = !flag;
        }


    </script>
</body>
</html>